<template>
<view>
<!-- 评价列表 -->
<view v-for="(item, index) in orderList.item" :key="index">
  <!-- 标题栏 -->
  <view class="goods">
    <image :src="item.pic"></image>
    <view>{{item.name}}</view>
  </view>
  <!-- 内容栏 -->
  <view class="appraise-warp">
    <!-- 星星 -->
    <view class="star">
      <image v-for="(item, index2) in starNum" :key="index2" @tap="changeStart" :data-index="index" :src="item"></image>
    </view>
    <view class="appraise">
      <textarea type="text" placeholder="快来写评价吧！你的评价能帮助其他小伙伴哟~" maxlength="-1" @input="getText" :data-index="index"></textarea>
    </view>
    <view class="appraise-pic">
      <view class="appraise-photo">
      <!-- ----------- -->
        <view v-for="(items, indexs) in isImg" :key="indexs" v-if="isImg!=''" class="haveImg">
          <image mode="aspectFill" :src="items"></image>
          <image @tap="delImg" :data-index="indexs" id="redmind" src="/static/remao_shop/img/del.png"></image>
        </view>
        <!-- 上为有图 下为无图 -->
        <view @tap="choiseImg" class="noImg" v-if="isImg.length!=3" data-index="0">
          <image src="/static/remao_shop/img/camera_icon.png"></image>
          <text>{{imgText}}</text>
        </view>
        <!-- ----------------- -->
      </view>
    </view>
  </view>
</view>
<!-- 评价列表End -->
<!-- 提交评价 -->
<view class="commitBox" @tap="commitComment">提交</view>
<!-- 提交评价End -->




<!-- <view>
  <view class='goods'>
    <image></image>
    <text>925纯银手环 女款纯手工打造</text>
  </view>
  <view class='appraise-warp'>
    <view class='appraise'>
      <textarea type='text' placeholder='快来写评价吧！你的评价能帮助其他小伙伴哟~' maxlength='-1'></textarea>
    </view>
    <view class='appraise-pic'>
      <view class='appraise-photo fl'>
        <view class='goods-pic fl'>
          <image></image>
          <image></image>
        </view>
        <view class='camera fl'>
          <image src='../../img/camera_icon.png'></image>
          <text>2</text>/<text>3</text>
        </view>
      </view>
    </view>
  </view>
</view> -->
</view>
</template>

<script>
// var util = require('../../utils/util.js');
// import request from '../../utils/requestUtils.js';
// import {
//   xcxId,
//   commentpublish_url
// } from "../../utils/data.js";
import api from "../../../api";
var app = getApp();
var images = [];

export default {
  data() {
    return {
      userId: '',
      //传
      //订单列表
      orderList: [],
      // 评价商品索引
      orderIndex: '',
      //传
      // 评价内容
      commentText: [],
      // 上传的图片
      isImg: [],
      isImgFile: [],
      // 添加照片文字替换
      imgText: '添加照片',
      // 评价星级
      starNum: [],
      // 星数
      starts: 5,
      text: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    // wx.showLoading({
    //   title: '加载中',
    // })
    console.log(options);
    this.setData({
      orderIndex: options.index,
      userId: options.userId
    });
    this.getList();
  },
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    //加载待评价订单
    getList() {
      let that = this;
      app.globalData.request({
        url: api.fyz.orderList,
        data: {
          uid: that.userId,
          status: 8
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值

        },
        method: 'POST',
        success: res => {
          console.log(res);
          that.setData({
            orderList: res.order_list[that.orderIndex]
          });
          console.log(that.orderList); // wx.hideLoading()

          that.start();
        },
        fail: function (res) {//失败后的逻辑
        }
      });
    },

    // 星级
    start() {
      let startArray = [];

      for (let a = 0; a < 5; a++) {
        startArray.push("/static/remao_shop/img/startOn.png");
      }

      this.setData({
        starNum: startArray,
        starts: 5
      });
    },

    // 选择星级
    changeStart(e) {
      let index = parseInt(e.currentTarget.dataset.index);
      let startArray = [];

      for (let a = 0; a < 5; a++) {
        startArray.push("/static/remao_shop/img/startOn.png");
      }

      for (let b = 0; b < startArray.length; b++) {
        if (b == index + 1 || b > index + 1) {
          console.log('11');
          startArray.splice(b, 1, "/static/remao_shop/img/startOff.png");
        }
      }

      console.log(index + 1);
      this.setData({
        starNum: startArray,
        starts: index + 1
      });
    },

    //获取输入内容
    getText: function (e) {
      let index = e.currentTarget.dataset.index;
      let text = 'commentText[' + index + ']';
      this.setData({
        [text]: e.detail.value
      });
      console.log(this.commentText);
    },
    //选择图片
    choiseImg: function (e) {
      let that = this;
      let index = e.currentTarget.dataset.index;
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],

        success(res) {
          // wx.hideLoading()
          // tempFilePath可以作为img标签的src属性显示图片
          console.log(res);
          let chooseImg = res.tempFilePaths[0];
          that.isImg.push(chooseImg);

          if (that.isImg.length == 0) {
            that.setData({
              imgText: '添加照片'
            });
          } else if (that.isImg.length == 1) {
            that.setData({
              imgText: '2/3'
            });
          } else if (that.isImg.length == 2) {
            that.setData({
              imgText: '1/3'
            });
          }

          that.setData({
            isImg: that.isImg
          });
          console.log(that.isImg);
        },

        fail() {}

      });
    },
    //删除图片
    delImg: function (e) {
      let that = this;
      let index = e.currentTarget.dataset.index;
      let imgs = that.isImg;
      console.log(index);
      imgs.splice(index, 1);

      if (imgs.length == 2) {
        that.setData({
          imgText: '1/3'
        });
      } else if (imgs.length == 1) {
        that.setData({
          imgText: '2/3'
        });
      } else if (imgs.length == 0) {
        that.setData({
          imgText: '添加照片'
        });
      }

      console.log(imgs);
      that.setData({
        isImg: imgs
      });
    },

    // 提交评价判断是否输入内容
    commitComment() {
      let that = this; //先对内容进行判断
      // 判断用户是否输入评价内容

      if (that.commentText == '') {
        that.setData({
          commentText: '评价方未及时做出评价，系统默认好评'
        });
        that.commitImg();
      } else {
        that.commitImg();
      }
    },

    //图片转换为url
    commitImg() {
      // 提示进入loading加载动画
      wx.showLoading({
        title: '加载中'
      });
      let that = this;
      let imgArray = []; // 因图片转换单次仅能转换一张，故用循环进行遍历转换

      for (var a = 0; a < that.isImg.length; a++) {
        wx.uploadFile({
          url: api.default.wq_uplode_img,
          //仅为示例，非真实的接口地址
          filePath: that.isImg[a],
          name: 'file',
          formData: {
            'user': 'test'
          },

          success(res) {
            console.log(res); // 定义变量，向数组内的具体索引写入数据

            let i = that.isImgFile[a];
            i = res.data;
            imgArray.splice(a, 1, i);
            that.setData({
              isImgFile: imgArray
            });
            console.log(that.isImgFile);
          }

        });
      } // 在循环完成后再执行计时器效果


      setTimeout(() => {
        // 判断循环是否执行完毕
        if (a == that.isImg.length) {
          // 关闭loading动画
          wx.hideLoading(); // 执行提交方法

          that.commitUserComment();
          console.log(that.isImgFile);
        }
      }, 1000);
    },

    // 提交评论
    commitUserComment() {
      let that = this;
      console.log(this.isImgFile);
      let indexs = that.isImgFile.length;
      var isHaveImg;
      var imgs = ''; // 判断是否有图片

      if (that.isImgFile.length == 0) {
        isHaveImg = 0;
      } else if (that.isImgFile.length == 1) {
        isHaveImg = 1;
        imgs = that.isImgFile[0];
      } else if (that.isImgFile.length == 2) {
        isHaveImg = 1;
        imgs = that.isImgFile[0] + ',' + that.isImgFile[1];
      } else if (that.isImgFile.length == 3) {
        isHaveImg = 1;
        imgs = that.isImgFile[0] + ',' + that.isImgFile[1] + ',' + that.isImgFile[2];
      }

      console.log(imgs);
      app.globalData.request({
        url: api.fyz.addComment,
        data: {
          goods_id: that.orderList.item[0].goods_id,
          uid: that.userId,
          comment: that.commentText,
          type: 1,
          star: that.starts,
          haspic: isHaveImg,
          imgs: imgs,
          order_id: that.orderList.order_id
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值

        },
        method: 'POST',
        success: res => {
          console.log(res);

          if (res.status == 1) {
            wx.showToast({
              title: '感谢您的评价',
              duration: 1000
            });
            setTimeout(function () {
              // wx.navigateBack({
              //   delta: 1
              // })
              wx.reLaunch({
                url: '../../packageB/order/order?status=1&userId=' + that.userId
              });
            }, 1000);
          } else {
            wx.showToast({
              title: res.msg,
              duration: 1000
            });
          }
        },
        fail: function (res) {//失败后的逻辑
        }
      });
    }

  }
};
</script>
<style>
@import "./appraise.css";
</style>